<template>
  <div id="app">
    <header>
      <div class="header-left">
        <span class="site-title">{{ siteTypes[config.typeIndex] || '🎬 电影网站' }}</span>
        <span v-if="isLoggedIn && config.typeIndex === 2" class="cart-button" @click="openCartModal">
          <i class="cart-icon">🛒</i>
          <span class="cart-count" v-if="cartItemCount > 0">{{ cartItemCount }}</span>
        </span>
        <div class="search-container">
          <input 
            type="text" 
            v-model="searchQuery" 
            @input="searchMovies" 
            class="search-input" 
            :placeholder="config.typeIndex === 2 ? '搜索商品...' : config.typeIndex === 1 ? '搜索新闻...' : '搜索电影...'">
          <button class="search-button" @click="searchMovies">🔍</button>
        </div>
      </div>
      <div class="user-area">
        <div v-if="isLoggedIn">
          <span class="user-info">欢迎，{{ username }}</span>
          <button v-if="config.typeIndex === 2" class="header-button upload-button" @click="openProductUploadModal">
            上传商品
          </button>
          <button class="logout-button" @click="logout">退出登录</button>
        </div>
        <div v-else>
          <button class="header-button" @click="showLoginModal = true">登录</button>
        </div>
      </div>
    </header>
    <div class="movie-container">

      
      <!-- 内容列表 -->
      <div class="movie-list">
        <div 
          v-for="(movie, index) in filteredMovies" 
          :key="index" 
          class="movie-card"
          :style="{ backgroundImage: 'url(' + movie.poster + ')' }"
          @click="openMovieDetails(movie)"
        >
          <!-- 隐藏的图片用于触发onerror事件 -->
          <img :src="movie.poster" style="display:none" onerror="this.onerror=null;this.src='/public/images/bg.jpg';this.parentNode.style.backgroundImage='url(/public/images/bg.jpg)';">
          <div class="movie-info">
            <div v-if="config.typeIndex === 2" class="product-price">¥{{ movie.price }}</div>
            <div v-else class="movie-rating">⭐ {{ movie.rating || '暂无评分' }}</div>
            <div class="movie-title">{{ movie.title }}</div>
            <div class="movie-added-time">{{ config.typeIndex === 2 ? "上架时间" : "添加时间" }}: {{ formatDate(movie.addedTime) }}</div>
          </div>
        </div>
      </div>
      
      <!-- 内容详情弹窗 -->
      <Transition name="modal-fade">
        <div class="movie-modal-overlay" v-if="showMovieDetails" @click.self="showMovieDetails = false">
          <div class="movie-detail-container">
            <button class="close-button" @click="showMovieDetails = false">×</button>
            <div class="movie-detail-header">
              <img :src="selectedMovie.poster" alt="电影海报" class="detail-poster" onerror="this.onerror=null;this.src='/public/images/bg.jpg';" />
              <div class="movie-detail-info">
                <h2>{{ selectedMovie.title }}</h2>
                <p v-if="config.typeIndex !== 2" class="movie-meta">{{ selectedMovie.year }} • {{ selectedMovie.duration }} • {{ selectedMovie.director }}</p>
                <p v-if="config.typeIndex === 2" class="product-price-large">¥{{ selectedMovie.price }}</p>
                <p class="movie-added-time-detail">{{ config.typeIndex === 2 ? "上架时间" : "添加时间" }}: {{ formatDate(selectedMovie.addedTime) }}</p>
                <div v-if="config.typeIndex !== 2" class="movie-rating-large">⭐ {{ selectedMovie.rating || '暂无评分' }}</div>
                <button v-if="config.typeIndex !== 2" class="action-button play-movie" @click="playInNewTab(selectedMovie)">播放</button>
                <button v-else class="action-button buy-product" @click="addToCart(selectedMovie)">添加购物车</button>
                <div class="movie-genres">
                  <span v-for="(genre, idx) in selectedMovie.genres" :key="idx" class="genre-tag">{{ genre }}</span>
                </div>
              </div>
            </div>
            <div class="movie-detail-content">
              <h3>{{ config.typeIndex === 2 ? "商品描述" : "剧情简介" }}</h3>
              <p>{{ selectedMovie.desc || (config.typeIndex === 2 ? "暂无商品描述" : "暂无剧情简介") }}</p>
              <h3>{{ config.typeIndex === 2 ? "卖家信息" : "演职人员" }}</h3>
              <div class="movie-cast">{{ selectedMovie.actors || selectedMovie.authorName || "暂无信息" }}</div>
            </div>

            <!-- 评论列表 -->
            <div class="comments-section">
              <h3>{{ config.typeIndex === 1 ? '读者评论' : config.typeIndex === 2 ? '买家评论' : '观众评论' }}</h3>
              <div class="comment-list">
                <div v-if="movieComments.length === 0" class="no-comments">
                  暂无评论
                </div>
                <div v-for="(comment, index) in movieComments" :key="index" class="comment-item">
                  <div class="comment-header">
                    <span class="comment-author">{{ comment.authorName }}</span>
                    <span class="comment-date">{{ formatDate(comment.addedTime, true) }}</span>
                  </div>
                  <div class="comment-content">
                    {{ comment.body }}
                  </div>
                </div>
              </div>
              
              <!-- 评论输入框 -->
              <div v-if="isLoggedIn" class="comment-form">
                <h4>发表您的评论</h4>
                <textarea 
                  v-model="commentForm.content" 
                  placeholder="请输入您的评论..." 
                  rows="3"
                  :disabled="commentForm.submitting"
                ></textarea>
                <button 
                  class="submit-comment" 
                  @click="submitComment()" 
                  :disabled="commentForm.submitting"
                >
                  {{ commentForm.submitting ? '提交中...' : '提交评论' }}
                </button>
              </div>
              <div v-else class="login-to-comment">
                <p>请<a href="#" @click.prevent="showLoginModal = true">登录</a>后发表评论</p>
              </div>
            </div>
            
            
          </div>
        </div>
      </Transition>
    </div>
    
    <!-- 登录弹窗 -->
    <Transition name="modal-fade">
      <div class="modal-overlay" v-if="showLoginModal" @click.self="showLoginModal = false">
      <Transition name="fade">
        <div class="login-container" v-if="showLoginModal">
          <h2>用户登录</h2>
        <form @submit.prevent="login">
          <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" v-model="loginForm.username" :class="{'error': validationErrors.username}" placeholder="请输入至少3个字符的用户名" required>
            <span v-if="validationErrors.username" class="error-text">{{ validationErrors.username }}</span>
          </div>
          <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" v-model="loginForm.pwd" :class="{'error': validationErrors.pwd}" placeholder="请输入至少6位密码" required>
            <span v-if="validationErrors.pwd" class="error-text">{{ validationErrors.pwd }}</span>
          </div>
          <div class="error-message" v-if="loginError">{{ loginError }}</div>
          <div class="button-group">
            <button type="button" class="cancel-button" @click="showLoginModal = false">取消</button>
            <button type="submit" class="login-button" :disabled="loginLoading">
              {{ loginLoading ? '登录中...' : '登录' }}
            </button>
          </div>
          <div class="register-link">
            <p>还没有账号？<a href="#" @click.prevent="openRegister">立即注册</a></p>
          </div>
        </form>
        </div>
      </Transition>
    </div>
</Transition>

    <!-- 注册弹窗 -->
    <Transition name="modal-fade">
      <div class="modal-overlay" v-if="showRegisterModal" @click.self="showRegisterModal = false">
      <Transition name="fade">
        <div class="login-container register-container" v-if="showRegisterModal">
          <h2 class="register-title">用户注册</h2>
          <form @submit.prevent="register">
            <div class="form-group">
              <label for="reg-username">用户名：</label>
              <input type="text" id="reg-username" v-model="registerForm.username" :class="{'error': validationRegErrors.username}" placeholder="请输入至少3个字符的用户名" required>
              <span v-if="validationRegErrors.username" class="error-text">{{ validationRegErrors.username }}</span>
            </div>
            <div class="form-group">
              <label for="reg-password">密码：</label>
              <input type="password" id="reg-password" v-model="registerForm.pwd" :class="{'error': validationRegErrors.pwd}" placeholder="请设置至少6位的安全密码" required>
              <span v-if="validationRegErrors.pwd" class="error-text">{{ validationRegErrors.pwd }}</span>
            </div>
            <div class="form-group">
              <label for="reg-confirm-password">确认密码：</label>
              <input type="password" id="reg-confirm-password" v-model="registerForm.confirmPwd" :class="{'error': validationRegErrors.confirmPwd}" placeholder="请再次输入相同的密码确认" required>
              <span v-if="validationRegErrors.confirmPwd" class="error-text">{{ validationRegErrors.confirmPwd }}</span>
            </div>
            <div class="form-group">
              <label for="reg-age">年龄：</label>
              <input type="number" id="reg-age" v-model="registerForm.age" min="1" max="120" placeholder="请输入1-120之间的有效年龄" :class="{'error': validationRegErrors.age}" @input="validationRegErrors.age = ''" required>
              <span v-if="validationRegErrors.age" class="error-text">{{ validationRegErrors.age }}</span>
            </div>
            <div class="form-group">
              <label for="reg-realName">真实姓名：</label>
              <input type="text" id="reg-realName" v-model="registerForm.realName" placeholder="请输入您的真实姓名（必填）" :class="{'error': validationRegErrors.realName}" @input="validationRegErrors.realName = ''" required>
              <span v-if="validationRegErrors.realName" class="error-text">{{ validationRegErrors.realName }}</span>
            </div>
            <div class="form-group">
              <label for="reg-email">邮箱：</label>
              <input type="email" id="reg-email" v-model="registerForm.email" :class="{'error': validationRegErrors.email}" placeholder="请输入有效的邮箱地址，如example@domain.com" @input="validationRegErrors.email = ''" required>
              <span v-if="validationRegErrors.email" class="error-text">{{ validationRegErrors.email }}</span>
            </div>
            <div class="form-group">
              <label for="reg-stuNum">学号：</label>
              <input type="text" id="reg-stuNum" v-model="registerForm.stuNum" :class="{'error': validationRegErrors.stuNum}" placeholder="请输入8-12位数字的学号" required>
              <span v-if="validationRegErrors.stuNum" class="error-text">{{ validationRegErrors.stuNum }}</span>
            </div>
            <div class="form-group">
              <label for="reg-className">班级：</label>
              <input type="text" id="reg-className" v-model="registerForm.className" :class="{'error': validationRegErrors.className}" placeholder="请输入您所在的班级名称（必填）" required>
              <span v-if="validationRegErrors.className" class="error-text">{{ validationRegErrors.className }}</span>
            </div>
            <div class="error-message" v-if="registerError"><i class="error-icon">❗</i>{{ registerError }}</div>
            <div class="button-group">
              <button type="button" class="cancel-button" @click="showRegisterModal = false">取消</button>
              <button type="submit" class="login-button register-btn" :disabled="registerLoading">
                {{ registerLoading ? '注册中...' : '注册' }}
              </button>
            </div>
          </form>
        </div>
      </Transition>
    </div>
</Transition>
    <!-- 通知提示组件 -->
    <transition name="notification-fade">
      <div class="notification" v-if="notification.show" :class="notification.type">
        <div class="notification-content">
          <span class="notification-icon">{{ notification.icon }}</span>
          <span class="notification-message">{{ notification.message }}</span>
        </div>
      </div>
    </transition>
    <!-- 购物车弹窗 -->
    <Transition name="modal-fade">
      <div class="cart-modal-overlay" v-if="showCartModal && isLoggedIn" @click.self="showCartModal = false">
        <div class="cart-detail-container">
          <button class="close-button" @click="showCartModal = false">×</button>
          <h2>购物车</h2>
          <div v-if="cartItems.length === 0" class="empty-cart">
            购物车是空的
          </div>
          <div v-else class="cart-items">
            <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
              <img :src="item.picPaths" alt="商品图片" class="cart-item-image" onerror="this.onerror=null;this.src='/public/images/bg.jpg';" />
              <div class="cart-item-details">
                <h3>{{ item.title }}</h3>
                <p class="cart-item-price">¥{{ item.price }}</p>
                <div class="cart-item-quantity">
                  <button @click="decreaseQuantity(index)" class="quantity-btn">-</button>
                  <span>{{ item.quantity }}</span>
                  <button @click="increaseQuantity(index)" class="quantity-btn">+</button>
                </div>
              </div>
              <button @click="removeFromCart(index)" class="remove-item-btn">删除</button>
            </div>
            <div class="cart-total">
              <h3>总计: ¥{{ calculateTotal }}</h3>
              <button class="checkout-btn">结算</button>
            </div>
          </div>
        </div>
      </div>
    </Transition>
    <!-- 商品上传弹窗 -->
    <Transition name="modal-fade">
      <ProductUpload 
        v-if="showProductUploadModal && isLoggedIn"
        :userId="userId"
        @close="showProductUploadModal = false"
        @uploaded="handleProductUploaded"
      />
    </Transition>
  </div>
</template>

<script>
// 导入配置
// 导入配置
import config from './config.js';
import ProductUpload from './components/ProductUpload.vue';

export default {
  components: {
    ProductUpload
  },
  data() {
    return {
      // 网站配置
      config,
      // 网站类型标题映射
      siteTypes: {
        1: '📰 新闻网站',
        2: '🛒 电商网站',
        3: '🎬 电影网站'
      },
      movies: [],
      filteredMovies: [],
      searchQuery: '',
      loading: true,
      showMovieDetails: false,
      selectedMovie: {},
      showLoginModal: false,
      showRegisterModal: false,
      movieComments: [],
      commentForm: {content: '', submitting: false},
      cartItems: [], // 购物车商品列表
      showCartModal: false, // 控制购物车弹窗显示
      showProductUploadModal: false, // 控制商品上传弹窗显示
      loginForm: {
        username: '',
        pwd: ''
      },
      registerForm: {
        username: '',
        pwd: '',
        confirmPwd: '',
        age: null,
        realName: '',
        email: '',
        stuNum: '',
        className: ''
      },
      validationRules: {
        username: {
          required: true,
          minLength: 3
        },
        pwd: {
          required: true,
          minLength: 6
        },
        email: {
          required: true,
          pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
        },
        stuNum: {
          required: true,
          pattern: /^\d{8,12}$/
        },
        className: {
          required: true
        },
        age: {
          required: true
        },
        realName: {
          required: true
        }
      },
      validationErrors: {
        username: '',
        pwd: ''
      },
      validationRegErrors: {
        username: '',
        pwd: '',
        confirmPwd: '',
        email: '',
        stuNum: '',
        className: '',
        age: '',
        realName: ''
      },
      loginLoading: false,
      registerLoading: false,
      loginError: '',
      registerError: '',
      isLoggedIn: false,
      username: '',
      userId: '',
      notification: {
        show: false,
        message: '',
        type: 'success',
        icon: '✓',
        timer: null
      },
    };
  },
  computed: {
    // 计算购物车中的商品数量
    cartItemCount() {
      return this.cartItems.reduce((total, item) => total + (item.quantity || 1), 0);
    },

    // 计算购物车中商品的总价格
    calculateTotal() {
      return this.cartItems.reduce((total, item) => {
        return total + (item.price * (item.quantity || 1));
      }, 0).toFixed(2);
    }
  },
  mounted() {
    // 从本地存储中恢复登录状态
    if (localStorage.getItem('isLoggedIn') === 'true') {
      this.isLoggedIn = true;
      this.username = localStorage.getItem('username') || '';
      this.userId = localStorage.getItem('userId') || '';
    }

    // 从本地存储加载购物车数据
    const savedCartItems = localStorage.getItem('cartItems');
    if (savedCartItems) {
      try {
        this.cartItems = JSON.parse(savedCartItems);
      } catch (e) {
        console.error('解析购物车数据失败:', e);
        this.cartItems = [];
      }
    }

    // 获取电影列表
    this.fetchMovies();

    // 添加键盘事件监听
    document.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    // 移除键盘事件监听，防止内存泄漏
    document.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      // 检查是否按下Esc键(keyCode 27或key为'Escape')
      if (event.keyCode === 27 || event.key === 'Escape') {
        console.log("ESC键被按下");
        // 检查当前哪个弹窗打开，然后关闭它
        if (this.showMovieDetails) {
          console.log("关闭电影详情");
          this.showMovieDetails = false;
        } else if (this.showLoginModal) {
          console.log("关闭登录窗口");
          this.showLoginModal = false;
        } else if (this.showRegisterModal) {
          console.log("关闭注册窗口");
          this.showRegisterModal = false;
        }
      }
    },
    validateLoginForm() {
      let isValid = true;
      this.validationErrors = {
        username: '',
        pwd: ''
      };
      
      // 验证用户名
      if (!this.loginForm.username) {
        this.validationErrors.username = '用户名不能为空';
        isValid = false;
      } else if (this.loginForm.username.length < this.validationRules.username.minLength) {
        this.validationErrors.username = `用户名长度不能少于${this.validationRules.username.minLength}个字符`;
        isValid = false;
      }
      
      // 验证密码
      if (!this.loginForm.pwd) {
        this.validationErrors.pwd = '密码不能为空';
        isValid = false;
      } else if (this.loginForm.pwd.length < this.validationRules.pwd.minLength) {
        this.validationErrors.pwd = `密码长度不能少于${this.validationRules.pwd.minLength}个字符`;
        isValid = false;
      }
      
      return isValid;
    },
    
    login() {
      // 表单验证
      if (!this.validateLoginForm()) {
        return;
      }
      
      this.loginLoading = true;
      this.loginError = '';
      
      // 调用登录API
      fetch('/api/demo/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.loginForm.username,
          pwd: this.loginForm.pwd
        })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('登录失败，请检查用户名和密码');
        }
        return response.json();
      })
      .then(data => {
        // 检查返回的错误码
        if (data.errno !== undefined && data.errno !== 0) {
          if (data.errno === 1) {
            this.loginError = "用户名或密码错误";
          } else {
            this.loginError = data.message || "登录失败，请重试";
          }
          return;
        }

        // 登录成功
        this.isLoggedIn = true;
        this.username = this.loginForm.username;
        // 灵活处理返回的用户ID
        if (data.data && data.data.id) {
            this.userId = data.data.id;
        } else {
            this.userId = data.id || ''; 
        }
        this.showLoginModal = false;

        // 显示成功通知
        this.showNotification('登录成功，欢迎回来！', 'success');
        
        // 保存登录状态到本地存储
        localStorage.setItem('isLoggedIn', 'true');
        localStorage.setItem('username', this.username);
        localStorage.setItem('userId', this.userId); // 保存用户ID
        
        // 重置表单
        this.loginForm = {
          username: '',
          pwd: ''
        };
      })
      .catch(error => {
        this.loginError = error.message;
      })
      .finally(() => {
        this.loginLoading = false;
      });
    },
    
    validateRegisterForm() {
      let isValid = true;
      this.validationRegErrors = {
        username: '',
        pwd: '',
        confirmPwd: '',
        email: '',
        stuNum: '',
        className: '',
        age: '',
        realName: ''
      };
      
      // 验证用户名
      if (!this.registerForm.username) {
        this.validationRegErrors.username = '用户名不能为空';
        isValid = false;
      } else if (this.registerForm.username.length < this.validationRules.username.minLength) {
        this.validationRegErrors.username = `用户名长度不能少于${this.validationRules.username.minLength}个字符`;
        isValid = false;
      }
      
      // 验证密码
      if (!this.registerForm.pwd) {
        this.validationRegErrors.pwd = '密码不能为空';
        isValid = false;
      } else if (this.registerForm.pwd.length < this.validationRules.pwd.minLength) {
        this.validationRegErrors.pwd = `密码长度不能少于${this.validationRules.pwd.minLength}个字符`;
        isValid = false;
      }
      
      // 验证确认密码
      if (!this.registerForm.confirmPwd) {
        this.validationRegErrors.confirmPwd = '确认密码不能为空';
        isValid = false;
      } else if (this.registerForm.pwd !== this.registerForm.confirmPwd) {
        this.validationRegErrors.confirmPwd = '两次输入的密码不一致';
        isValid = false;
      }
      
      // 验证邮箱
      if (!this.registerForm.email) {
        this.validationRegErrors.email = '邮箱不能为空';
        isValid = false;
      } else if (!this.validationRules.email.pattern.test(this.registerForm.email)) {
        this.validationRegErrors.email = '请输入有效的邮箱地址';
        isValid = false;
      }
      
      // 验证学号
      if (!this.registerForm.stuNum) {
        this.validationRegErrors.stuNum = '学号不能为空';
        isValid = false;
      } else if (!this.validationRules.stuNum.pattern.test(this.registerForm.stuNum)) {
        this.validationRegErrors.stuNum = '学号必须为8-12位数字';
        isValid = false;
      }
      
      // 验证班级
      if (!this.registerForm.className) {
        this.validationRegErrors.className = '班级不能为空';
        isValid = false;
      }
      
      // 验证年龄
      if (!this.registerForm.age) {
        this.validationRegErrors.age = '年龄不能为空';
        isValid = false;
      }

      // 验证真实姓名
      if (!this.registerForm.realName) {
        this.validationRegErrors.realName = '真实姓名不能为空';
        isValid = false;
      }
      
      return isValid;
    },
    
    register() {
      // 表单验证
      if (!this.validateRegisterForm()) {
        return;
      }

      this.registerLoading = true;
      this.registerError = '';

      // 调用注册API
      fetch('/api/demo/reg', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.registerForm.username,
          pwd: this.registerForm.pwd,
          age: this.registerForm.age,
          realName: this.registerForm.realName,
          email: this.registerForm.email,
          stuNum: this.registerForm.stuNum,
          className: this.registerForm.className
        })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('注册请求失败');
        }
        return response.json();
      })
      .then(data => {
        if (data.errno && data.errno !== 0) {
          // 处理具体的错误情况
          if (data.errno === 10001) {
            this.registerError = "用户名已存在，请更换其他用户名";
          } else if (data.errno === 10002) {
            this.registerError = "邮箱地址已被使用";
          } else if (data.errno === 10003) {
            this.registerError = "学号已被注册";
          } else {
            // 处理其他可能的错误
            this.registerError = data.message || '注册失败，请检查您的信息';
          }
          return;
        }
        
        // 注册成功，自动登录
        this.$nextTick(() => {
          // 显示成功通知
          this.showNotification('注册成功，已为您自动登录', 'success');
          this.showRegisterModal = false;
          
          // 设置登录状态
          this.isLoggedIn = true;
          this.username = this.registerForm.username;
          this.userId = data.id || data.userId || '';
          
          // 保存登录状态到本地存储
          localStorage.setItem('isLoggedIn', 'true');
          localStorage.setItem('username', this.username);
          localStorage.setItem('userId', data.id || data.userId || '');
          
          // 重置注册表单
          this.registerForm = {
            username: '',
            pwd: '',
            confirmPwd: '',
            age: null,
            realName: '',
            email: '',
            stuNum: '',
            className: ''
          };
        });
      })
      .catch(error => {
        // 处理网络错误或其他异常
        console.error("注册请求出错:", error);
        this.registerError = "网络连接错误，请稍后重试";
      })
      .finally(() => {
        this.registerLoading = false;
      });
    },
  logout() {
    this.isLoggedIn = false;
    this.username = '';
    this.userId = '';

    // 清除本地存储的登录信息
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('username');
    localStorage.removeItem('userId');

    // 清除购物车数据
    this.cartItems = [];
    localStorage.removeItem('cartItems');

    // 提示用户已成功登出
    this.showNotification('已成功登出', 'info', 'ℹ️');
  },

  addToCart(product) {
    // 检查商品是否已在购物车中
    const existingItem = this.cartItems.find(item => item.id === product.id);

    if (existingItem) {
      // 如果商品已存在，增加数量
      existingItem.quantity = (existingItem.quantity || 1) + 1;
      this.showNotification(`已增加商品数量: ${product.title}`, 'success');
    } else {
      // 如果是新商品，添加到购物车
      const cartItem = { ...product, quantity: 1 };
      this.cartItems.push(cartItem);
      this.showNotification(`已添加到购物车: ${product.title}`, 'success');
    }

    // 保存购物车数据到本地存储
    localStorage.setItem('cartItems', JSON.stringify(this.cartItems));
  },

  increaseQuantity(index) {
    if (index >= 0 && index < this.cartItems.length) {
      this.cartItems[index].quantity = (this.cartItems[index].quantity || 1) + 1;
      // 保存购物车数据到本地存储
      localStorage.setItem('cartItems', JSON.stringify(this.cartItems));
    }
  },

  decreaseQuantity(index) {
    if (index >= 0 && index < this.cartItems.length) {
      if (this.cartItems[index].quantity && this.cartItems[index].quantity > 1) {
        this.cartItems[index].quantity--;
        // 保存购物车数据到本地存储
        localStorage.setItem('cartItems', JSON.stringify(this.cartItems));
      }
    }
  },

  removeFromCart(index) {
    if (index >= 0 && index < this.cartItems.length) {
      this.cartItems.splice(index, 1);
      // 保存购物车数据到本地存储
      localStorage.setItem('cartItems', JSON.stringify(this.cartItems));
    }
  },

  openCartModal() {
    this.showCartModal = true;
  },
  openRegister() {
      // 关闭登录窗口，打开注册窗口
      this.showLoginModal = false;
      this.showRegisterModal = true;
    },
    
    // 获取电影列表
    fetchMovies() {
      this.loading = true;
      // 根据配置的 typeIndex 获取不同类型的内容
      const typeIndex = this.config.typeIndex || 3;
      fetch(`/api/demo/getallitems?typeIndex=${typeIndex}`)
        .then(response => {
          if (!response.ok) {
            throw new Error(`获取${this.siteTypes[typeIndex] || '内容'}列表失败`);
          }
          return response.json();
        })
        .then(data => {
          this.movies = data;
          this.filteredMovies = [...data];
          
          // 添加默认海报
          this.movies.forEach(movie => {
            if (!movie.picPaths) {
              movie.poster = '/public/images/bg.jpg';
            } else {
              movie.poster = movie.picPaths;
            }
          });
        })
        .catch(error => {
          console.error('获取电影列表错误:', error);
          // 添加一些默认电影数据，以防API调用失败
          this.movies = [
            { title: '无问西东', poster: '/assets/images/bg.jpg', description: '如果提前了解了你所要面对的人生，你是否还会有勇气前来?' },
            { title: '肖申克的救赎', poster: '/assets/images/shawshank.jpg', description: '希望是件好东西，也许是最好的，好东西是不会消亡的' },
            { title: '阿甘正传', poster: '/assets/images/forrestgump.jpg', description: '生活就像一盒巧克力，你永远不知道下一颗是什么味道' },
            { title: '霸王别姬', poster: '/assets/images/farewellmyconcubine.jpg', description: '人间四月芳菲尽，山寺桃花始盛开' }
          ];
          this.filteredMovies = [...this.movies];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    openProductUploadModal() {
      if (!this.isLoggedIn) {
        this.showNotification('请先登录后再上传商品', 'warning');
        this.showLoginModal = true;
        return;
      }
      this.showProductUploadModal = true;
    },

    handleProductUploaded(product) {
      // 显示成功通知
      this.showNotification('商品上传成功！', 'success');
      // 关闭上传窗口
      this.showProductUploadModal = false;
      // 刷新商品列表
      this.fetchMovies();
    },
    
    // 搜索电影
    searchMovies() {
      if (!this.searchQuery.trim()) {
        this.filteredMovies = [...this.movies];
        return;
      }
      
      const query = this.searchQuery.toLowerCase().trim();
      this.filteredMovies = this.movies.filter(movie => {
        return movie.title.toLowerCase().includes(query) ||
               (movie.desc && movie.desc.toLowerCase().includes(query)) ||
               (movie.actors && movie.actors.toLowerCase().includes(query));
      });
    },
    
    // 打开电影详情
    openMovieDetails(movie) {
      this.selectedMovie = movie;
      this.showMovieDetails = true;
      this.fetchMovieComments(movie.id);
    },
    
    // 处理电影卡片海报加载错误
    handlePosterError() {
      // 已使用内联onerror处理
    },
    
    // 处理电影详情页海报加载错误
    handleDetailPosterError() {
      // 已使用内联onerror处理
    },
    
    // 在新标签页播放电影
    playInNewTab(movie) {
      if (!movie || !movie.playUrl) {
        this.showNotification('该电影暂无播放链接', 'warning');
        return;
      }
      
      // 在新标签页打开播放链接
      window.open(movie.playUrl, '_blank');
    },

    showNotification(message, type = 'success', duration = 3000) {
      // 清除之前的定时器
      if (this.notification.timer) {
        clearTimeout(this.notification.timer);
      }

      // 设置图标
      let icon = '✓';
      if (type === 'error') icon = '✗';
      if (type === 'info') icon = 'ℹ';
      if (type === 'warning') icon = '⚠';

      // 显示通知
      this.notification = {
        show: true,
        message,
        type,
        icon,
        timer: null
      };

      // 设置自动关闭
      this.notification.timer = setTimeout(() => {
        this.notification.show = false;
      }, duration);
    },
    
    fetchMovieComments(movieId) {
      // 从API获取指定电影的评论
      fetch('/api/demo/getallitems?typeIndex=4')
        .then(response => {
          if (!response.ok) {
            throw new Error('获取评论失败');
          }
          return response.json();
        })
        .then(data => {
          // 筛选出电影相关的评论
          this.movieComments = data.filter(comment => 
            comment.articleid == movieId
          ) || [];
        })
        .catch(error => {
          console.error('获取评论错误:', error);
          this.movieComments = [];
        });
    },
    
    submitComment() {
      if (!this.commentForm.content.trim()) {
        this.showNotification('评论内容不能为空', 'error');
        return;
      }

      // 检查用户是否已登录且userId不为空
      if (!this.isLoggedIn || !this.userId) {
        this.showNotification('登录信息无效，请重新登录', 'error');
        this.showLoginModal = true;
        return;
      }
      
      this.commentForm.submitting = true;
      
      fetch('/api/demo/additem?typeIndex=4', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          typeIndex: 4,
          body: this.commentForm.content,
          replyType: this.config.typeIndex === 1 ? "新闻" : this.config.typeIndex === 2 ? "商品" : "电影",
          articleid: this.selectedMovie.id,
          userid: this.userId
        })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('提交评论失败');
        }
        return response.json();
      })
      .then(data => {
        // 评论成功后重新获取评论列表
        this.fetchMovieComments(this.selectedMovie.id);
        this.commentForm.content = '';
        this.showNotification('评论发表成功！', 'success');
      })
      .catch(error => {
        console.error('提交评论错误:', error);
        this.showNotification('提交评论失败，请重试', 'error');
      })
      .finally(() => {
        this.commentForm.submitting = false;
      });
    },
    
    formatDate(dateString, includeTime = false) {
      if (!dateString) return '';
      
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      
      if (includeTime) {
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
      
      return `${year}-${month}-${day}`;
    },
  },
  mounted() {
    // 从本地存储中恢复登录状态
    if (localStorage.getItem('isLoggedIn') === 'true') {
      this.isLoggedIn = true;
      this.username = localStorage.getItem('username') || '';
      this.userId = localStorage.getItem('userId') || '';
    }
    
    // 获取电影列表
    this.fetchMovies();
  }
};
</script>

<style>
* {
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.site-title {
  margin-right: 15px;
  font-weight: bold;
}

.search-container {
  display: flex;
  margin-left: 20px;
  position: relative;
}

.search-input {
  padding: 10px 40px 10px 15px;
  border-radius: 25px;
  border: 2px solid #3a3a3a;
  background: rgba(30, 30, 30, 0.8);
  color: #ffffff;
  width: 200px;
  outline: none;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

.search-input:focus {
  border-color: #646cff;
  box-shadow: 0 0 15px rgba(100, 108, 255, 0.3);
  width: 240px;
  background: rgba(40, 40, 45, 0.9);
}

.search-input::placeholder {
  color: #888;
  opacity: 0.8;
}

.search-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #666666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.search-button:hover {
  color: #333333;
  opacity: 1;
  transform: translateY(-50%);
}

.header-button {
  background: linear-gradient(145deg, #2c2c2c, #3a3a3a);
  color: #e0e0e0;
  border: 2px solid white;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 20px;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-button:hover {
  background: linear-gradient(145deg, #3a3a3a, #2c2c2c);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* 登录弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  transition: opacity 0.3s ease;
}

/* 添加过渡动画 */
/* 添加过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

/* 模态框背景动画 */
.modal-fade-enter-active, .modal-fade-leave-active {
  transition: opacity 0.3s ease;
}
.modal-fade-enter-from, .modal-fade-leave-to {
  opacity: 0;
}

.login-container {
  width: 450px;
  max-width: 90%;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: popup 0.4s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 90vh;
  box-sizing: border-box;
  z-index: 1001;
}

.login-container {
  z-index: 1001;
}

@keyframes popup {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  70% {
    transform: scale(1.03) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.login-container h2 {
  margin-top: 0;
  margin-bottom: 25px;
  color: #2c3e50;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}

.login-container h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #3498db, #2980b9);
  border-radius: 3px;
}

.register-title {
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 26px;
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 12px;
}

.register-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, #3498db, #9b59b6);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.form-group {
  margin-bottom: 15px;
  width: 100%;
  max-width: 450px;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s;
  box-sizing: border-box;
}

.form-group:hover {
  background-color: rgba(240, 240, 240, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  text-overflow: ellipsis;
}

.form-group input::placeholder {
  opacity: 0.7;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.form-group input:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
  outline: none;
}

.form-group input.error {
  border-color: #e74c3c;
}

.error-text {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: flex-start;
  background-color: rgba(231, 76, 60, 0.1);
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid #e74c3c;
  box-sizing: border-box;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  flex-wrap: wrap;
}

.error-text::before {
  content: "⚠️";
  margin-right: 5px;
  flex-shrink: 0;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  gap: 20px;
  width: 100%;
}

.login-button, .cancel-button {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex: 1;
}

.login-button {
  background: linear-gradient(145deg, #3498db, #2980b9);
  color: white;
}

.login-button:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.login-button:active {
  transform: translateY(1px);
}

.cancel-button {
  background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
  color: #555;
  border: 1px solid #ddd;
}

.cancel-button:hover {
  background-color: #d0d0d0;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: rgba(231, 76, 60, 0.1);
  padding: 12px 15px;
  border-radius: 8px;
  border-left: 4px solid #e74c3c;
  display: flex;
  align-items: center;
}

.error-icon {
  margin-right: 8px;
  font-style: normal;
  font-size: 16px;
}

/* 用户区域样式 */
.user-area {
  display: flex;
  align-items: center;
}

.user-info {
  color: #e0e0e0;
  margin-right: 20px;
  font-size: 14px;
  background-color: rgba(58, 58, 58, 0.7);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.logout-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logout-button:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.upload-button {
  background-color: #4CAF50;
  color: white;
  margin-right: 10px;
}

.upload-button:hover {
  background-color: #45a049;
}

.register-container {
  max-height: 85vh;
  overflow-y: auto;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 480px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, #ffffff, #f5f5f5);
  border-top: 5px solid #3498db;
}

.register-container::-webkit-scrollbar {
  width: 8px;
}

.register-container::-webkit-scrollbar-track {
  background-color: rgba(241, 241, 241, 0.6);
  border-radius: 10px;
  margin: 5px;
}

.register-container::-webkit-scrollbar-thumb {
  background-color: rgba(52, 152, 219, 0.5);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.register-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(52, 152, 219, 0.8);
}

/* 电影容器样式 */
.movie-container {
  margin: 30px 0;
  position: relative;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  margin-bottom: 20px;
  max-width: 600px;
  margin: 0 auto 30px;
}

.search-bar input {
  flex: 1;
  padding: 12px 15px;
  border: 2px solid #3498db;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s;
}

.search-bar input:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

.search-button {
  background: rgba(128, 128, 128, 0.5);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button:hover {
  background: #2980b9;
}

.search-icon {
  font-size: 20px;
}

/* 电影列表样式 */
.movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.movie-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  height: 330px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.movie-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.movie-rating {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
}

.movie-title {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  padding: 20px 20px 5px 20px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: white;
}

.movie-added-time {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 20px 15px 20px;
  font-size: 12px;
  color: #cccccc;
  background: rgba(0, 0, 0, 0.9);
}
.movie-added-time-detail {
  color: #888;
  font-size: 14px;
  margin-bottom: 10px;
  background-color: #f8f8f8;
  padding: 6px 10px;
  border-radius: 4px;
  display: inline-block;
}

/* 电影详情弹窗样式 */
.movie-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
}

.movie-detail-container {
  width: 80%;
  max-width: 900px;
  max-height: 85vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 15px;
  position: relative;
  padding: 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  animation: popup 0.4s ease-out;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: #555;
  transition: color 0.2s;
  z-index: 10;
}

.close-button:hover {
  color: #e74c3c;
}

.movie-detail-header {
  display: flex;
  margin-bottom: 30px;
}

.detail-poster {
  width: 220px;
  height: 330px;
  object-fit: cover;
  object-position: center center;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.movie-detail-info {
  margin-left: 30px;
  flex: 1;
}

.movie-detail-info h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #333333;
}

.movie-detail-info .movie-meta {
  color: #777;
  margin-bottom: 15px;
  background-color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 6px;
}

.movie-rating-large {
  font-size: 20px;
  margin-bottom: 15px;
  color: #f39c12;
}

.movie-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.genre-tag {
  background-color: #f0f0f0;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
}

.movie-detail-content {
  color: #333;
  line-height: 1.6;
}

.movie-detail-content h3 {
  margin: 25px 0 15px;
  font-size: 20px;
  position: relative;
  padding-bottom: 10px;
}

.movie-detail-content h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: #3498db;
}

.movie-cast {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.movie-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.action-button {
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}



.play-movie {
  background-color: #4caf50;
  color: white;
}

.play-movie:hover {
  background-color: #388e3c;
  transform: translateY(-2px);
}

/* 加载状态 */
.loading {
  text-align: center;
  margin: 40px 0;
  font-size: 18px;
  color: #555;
}

.no-movies {
  text-align: center;
  margin: 40px 0;
  font-size: 18px;
  color: #777;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  padding-top: 15px;
  padding-bottom: 5px;
  border-top: 1px solid #eee;
  width: 100%;
  max-width: 350px;
  color: #555;
}

.register-link a {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  padding: 8px 15px;
  background-color: rgba(52, 152, 219, 0.1);
  border-radius: 6px;
  transition: all 0.3s;
}

.register-link a:hover {
  background-color: rgba(52, 152, 219, 0.2);
  color: #2980b9;
  transform: translateY(-1px);
}

/* 评论列表样式 */
.comments-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.comments-section h3 {
  color: #3498db;
  font-size: 22px;
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  position: relative;
  padding-bottom: 10px;
}

.comments-section h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: #3498db;
}

.comment-list {
  margin-bottom: 25px;
}

.comment-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: #555;
}

.comment-author {
  font-weight: bold;
  color: #2c3e50;
}

.comment-date {
  color: #7f8c8d;
}

.comment-rating {
  color: #f39c12;
}

.comment-content {
  color: #333;
  line-height: 1.5;
}

.comment-form {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-form h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
}

.rating-select {
  margin-bottom: 15px;
}

.star-rating {
  color: #f39c12;
  cursor: pointer;
  letter-spacing: 3px;
}

.comment-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
  resize: vertical;
  font-family: inherit;
}

.submit-comment {
  background-color: #2980b9;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}

.submit-comment:hover {
  background-color: #3498db;
  transform: translateY(-2px);
}

/* 通知提示样式 */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  display: flex;
  align-items: center;
  z-index: 9999;
  min-width: 300px;
}

.notification-content {
  display: flex;
  align-items: center;
}

.notification-icon {
  margin-right: 10px;
  font-size: 18px;
}

.notification-message {
  font-size: 16px;
}

.notification.success {
  background-color: #4caf50;
  color: white;
}

.notification.error {
  background-color: #f44336;
  color: white;
}

.notification.info {
  background-color: #2196f3;
  color: white;
}

.notification.warning {
  background-color: #ff9800;
  color: white;
}

/* 通知动画 */
.notification-fade-enter-active,
.notification-fade-leave-active {
  transition: all 0.4s;
}

.notification-fade-enter-from,
.notification-fade-leave-to {
  opacity: 0;
  transform: translateX(50px);
}

/* 商品价格样式 */
.product-price {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #e74c3c;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 16px;
  z-index: 2;
}

.product-price-large {
  color: #e74c3c;
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.buy-product {
  background-color: #e74c3c !important;
}

.buy-product:hover {
  background-color: #c0392b !important;
}

/* 购物车按钮样式 */
.cart-button {
  position: relative;
  background: linear-gradient(145deg, #e74c3c, #c0392b);
  color: #e0e0e0;
  border: 2px solid white;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 15px;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-icon {
  font-style: normal;
  font-size: 20px;
  color: white;
}

.cart-button:hover {
  background: linear-gradient(145deg, #c0392b, #e74c3c);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  color: white;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* 购物车弹窗样式 */
.cart-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.cart-detail-container {
  background: white;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  border-radius: 10px;
  padding: 20px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cart-detail-container h2 {
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.empty-cart {
  text-align: center;
  padding: 30px 0;
  color: #999;
  font-style: italic;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background: #f8f8f8;
  position: relative;
}

.cart-item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
}

.cart-item-details {
  flex: 1;
  margin-left: 15px;
}

.cart-item-details h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #333;
}

.cart-item-price {
  font-weight: bold;
  color: #e74c3c;
  margin: 5px 0;
}
.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.cart-item-quantity span {
  font-weight: bold;
  color: #333;
  min-width: 20px;
  text-align: center;
  font-size: 14px;
}

.quantity-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.quantity-btn:hover {
  background: #f5f5f5;
}

.remove-item-btn {
  padding: 5px 10px;
  background: #e0e0e0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.remove-item-btn:hover {
  background: #ccc;
}

.cart-total {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-total h3 {
  font-size: 18px;
  color: #333;
}

.checkout-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.checkout-btn:hover {
  background: #c0392b;
}
</style>